<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import FamilyCard from './component/FamilyCard.vue'
import FamilyCardList from './component/FamilyCardList.vue'

const router = useRouter()
const searchQuery = ref('')

const heroImages = ref([
  '',
  '',
  '',
  ''
])

const allFamilies = ref([
  {
    id: '1',
    name: '张氏家族',
    location: '山东济南',
    description: '历史悠久的张氏宗族，传承千年文化',
    avatar: '/placeholder.svg?height=120&width=120',
    memberCount: 1200
  },
  {
    id: '2',
    name: '李氏家族',
    location: '河南洛阳',
    description: '书香门第，文化底蕴深厚',
    avatar: '/placeholder.svg?height=120&width=120',
    memberCount: 980
  },
  {
    id: '3',
    name: '王氏家族',
    location: '江苏苏州',
    description: '商贾世家，诚信经营传家',
    avatar: '/placeholder.svg?height=120&width=120',
    memberCount: 1500
  },
  {
    id: '4',
    name: '陈氏家族',
    location: '福建泉州',
    description: '海外华侨众多，根在故土',
    avatar: '/placeholder.svg?height=120&width=120',
    memberCount: 2100
  },
  {
    id: '5',
    name: '刘氏家族',
    location: '湖南长沙',
    description: '文武双全，人才辈出',
    avatar: '/placeholder.svg?height=120&width=120',
    memberCount: 800
  },
  {
    id: '6',
    name: '赵氏家族',
    location: '河北石家庄',
    description: '皇室后裔，血脉尊贵',
    avatar: '/placeholder.svg?height=120&width=120',
    memberCount: 1350
  }
])

const familyBatches = computed(() => {
  const batches = []
  for (let i = 0; i < allFamilies.value.length; i += 2) {
    batches.push(allFamilies.value.slice(i, i + 2))
  }
  return batches
})

const regionFamilies = computed(() => allFamilies.value.slice(0, 4))
const councilFamilies = computed(() => allFamilies.value.slice(2, 6))
const certifiedFamilies = computed(() => allFamilies.value.slice(1, 5))

const navigateToFamilyOrg = () => {
  const element = document.querySelector('.family-section')
  element?.scrollIntoView({ behavior: 'smooth' })
}

const navigateToCouncilOrg = () => {
  const element = document.querySelector('.council-section')
  element?.scrollIntoView({ behavior: 'smooth' })
}

const createFamily = () => {
  router.push('/create-family')
}

const handleApply = (familyId: string) => {
  console.log('申请加入家族:', familyId)
}
</script>

<template>
  <div class="clan-search-page">
    
    <div class="hero-section">
      <el-carousel 
        :interval="5000" 
        arrow="never" 
        indicator-position="none"
        height="100vh"
        class="hero-carousel"
      >
        <el-carousel-item v-for="(image, index) in heroImages" :key="index">
          <div 
            class="hero-slide"
            :style="{ backgroundImage: `url(${image})` }"
          >
            <div class="hero-overlay"></div>
          </div>
        </el-carousel-item>
      </el-carousel>
      
      <div class="hero-content">
        <div class="poem-container">
          <h1 class="poem-title">中源来·寻宗族</h1>
          <div class="poem-lines">
            <p class="poem-line">九派归源处，</p>
            <p class="poem-line">云台万姓开。</p>
            <p class="poem-line">天镜悬宗法，</p>
            <p class="poem-line">长风扫玉阶。</p>
          </div>
        </div>
        
        <div class="search-section">
          <el-input
            v-model="searchQuery"
            placeholder="搜索"
            class="hero-search"
            size="large"
          >
            <template #suffix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        
        <div class="action-buttons">
          <el-button 
            type="primary" 
            size="large" 
            class="action-btn primary-btn"
            @click="navigateToFamilyOrg"
          >
            家族组织
          </el-button>
          <el-button 
            size="large" 
            class="action-btn secondary-btn"
            @click="navigateToCouncilOrg"
          >
            理事会组织
          </el-button>
          <el-button 
            size="large" 
            class="action-btn secondary-btn"
            @click="createFamily"
          >
            创建家族
          </el-button>
        </div>
      </div>
    </div>

    <div class="content-section family-section">
      <h2 class="section-title">家族组织</h2>
      
      <div class="recommended-families">
        <h3 class="subsection-title">推荐家族</h3>
        <div class="carousel-container">
          <el-carousel 
            :interval="3000" 
            direction="vertical"
            height="400px"
            class="vertical-carousel"
          >
            <el-carousel-item v-for="(batch, index) in familyBatches" :key="index">
              <div class="family-batch">
                <FamilyCard 
                  v-for="family in batch" 
                  :key="family.id"
                  :family="family"
                  @apply="handleApply"
                />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      
      <div class="region-families">
        <h3 class="subsection-title">地区家族选择</h3>
        <FamilyCardList 
          :families="regionFamilies"
          :show-pagination="true"
          @apply="handleApply"
        />
      </div>
    </div>

    <div class="content-section council-section">
      <h2 class="section-title">理事会组织</h2>
      
      <div class="more-councils">
        <h3 class="subsection-title">更多理事会</h3>
        <FamilyCardList 
          :families="councilFamilies"
          :show-pagination="true"
          @apply="handleApply"
        />
      </div>
      
      <div class="council-certification">
        <h3 class="subsection-title">理事会认证家族</h3>
        <FamilyCardList 
          :families="certifiedFamilies"
          :show-pagination="true"
          @apply="handleApply"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.clan-search-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #faf8f3 0%, #f5f2ed 100%);
}

.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-carousel {
  height: 100vh;
}

.hero-slide {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(93, 64, 55, 0.3) 0%,
    rgba(136, 166, 142, 0.2) 50%,
    rgba(212, 175, 55, 0.3) 100%
  );
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  color: white;
}

.poem-container {
  margin-bottom: 60px;
}

.poem-title {
  font-family: 'KaiTi', '楷体', serif;
  font-size: 3.5rem;
  font-weight: 600;
  color: #f5f5dc;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 40px;
  letter-spacing: 0.1em;
}

.poem-lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.poem-line {
  font-family: 'KaiTi', '楷体', serif;
  font-size: 1.8rem;
  color: #f5f5dc;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.2em;
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

.poem-line:nth-child(1) { animation-delay: 0.5s; }
.poem-line:nth-child(2) { animation-delay: 1s; }
.poem-line:nth-child(3) { animation-delay: 1.5s; }
.poem-line:nth-child(4) { animation-delay: 2s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-section {
  margin-bottom: 40px;
}

.hero-search {
  width: 400px;
  
  :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #d4af37;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
  }
  
  :deep(.el-input__inner) {
    color: #5d4037;
    font-size: 16px;
  }
  
  :deep(.el-input__inner::placeholder) {
    color: #999;
  }
}

.action-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.action-btn {
  padding: 12px 32px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.primary-btn {
  background: linear-gradient(135deg, #88a68e 0%, #6b8e6b 100%);
  border-color: #88a68e;
  color: white;
  
  &:hover {
    background: linear-gradient(135deg, #6b8e6b 0%, #5a7a5a 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(136, 166, 142, 0.3);
  }
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: #d4af37;
  color: #5d4037;
  
  &:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: #88a68e;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
  }
}

.content-section {
  padding: 80px 5% 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.section-title {
  font-family: 'KaiTi', '楷体', serif;
  font-size: 2.5rem;
  color: #5d4037;
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #d4af37 0%, #88a68e 100%);
    border-radius: 2px;
  }
}

.subsection-title {
  font-family: 'KaiTi', '楷体', serif;
  font-size: 1.8rem;
  color: #5d4037;
  margin-bottom: 30px;
  padding-left: 20px;
  border-left: 4px solid #88a68e;
}

.recommended-families {
  margin-bottom: 80px;
}

.carousel-container {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.vertical-carousel {
  :deep(.el-carousel__container) {
    height: 400px;
  }
}

.family-batch {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
}

.region-families,
.more-councils,
.council-certification {
  margin-bottom: 60px;
}

.family-section {
  background: linear-gradient(135deg, rgba(136, 166, 142, 0.05) 0%, rgba(212, 175, 55, 0.05) 100%);
}

.council-section {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(136, 166, 142, 0.05) 100%);
}

@media (max-width: 768px) {
  .poem-title {
    font-size: 2.5rem;
  }
  
  .poem-line {
    font-size: 1.4rem;
  }
  
  .hero-search {
    width: 300px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-btn {
    width: 200px;
  }
  
  .content-section {
    padding: 60px 4% 40px;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .subsection-title {
    font-size: 1.5rem;
  }
  
  .family-batch {
    flex-direction: column;
    gap: 20px;
  }
}
</style>
